<template>
  <view class="height-100percent" style="padding: 10px 10px 0;">
    <view class="fd-row bgc-4 height-100percent bgc-primary br-12 jc-sb"
      style="padding: 0 15px; box-shadow: inset 0 0 3px #0c1322;">

      <view v-if="matchLeftWindow" class="f1 fd-row oh">
        <label @click="toHome" class="fs-44 fw-600 as-center">
          <text class="color-primary">NMK</text>
          <text class="ml-4 color-inverse">操盘系统</text>
        </label>

        <scroll-view class="f1 ml-180 mr-180 oh" scroll-x>
          <view class="fd-row height-100percent">
            <label @click="onClickItems({ menuIndex })" v-for="(menu, menuIndex) in menuItems"
              style="flex-shrink: 0; padding: 0 15px;"
              :class="[`color-${$route!.path.includes(menu.dir) ? 'primary' : 'inverse'}`, `height-100percent jc-center`]">
              {{ menu.title }}
            </label>
          </view>
        </scroll-view>
      </view>
      <uni-icons v-else class="as-center" :style="{ padding: `30rpx 30rpx 30rpx 0`, transform: `scale(1, 0.7)` }"
        type="list" size="30" color="#fff" @click="toggleLeftWindow" />

      <picker @change="changeItem" :value="itemIndex" :range="items" range-key="projectName"
        class="height-100percent ai-center jc-center mr-12 ml-12">
        <view class="fd-row jc-center ai-center">
          <label class="ml-8 mr-8 color-inverse fs-28">
            {{ items[itemIndex].projectName }}
          </label>
          <uni-icons type="arrowdown" size="14" color="#999" />
        </view>
      </picker>
      <label @click="showActionItems" :style="{ padding: `16rpx` }">
        <uni-icons type="person-filled" size="16" color="#eee" />
        <text class="ml-8 mr-8 color-inverse fs-28">{{ $store.state.userInfo.userName || "未知用户" }}</text>
        <uni-icons type="arrowdown" size="14" color="#999" />
      </label>
    </view>
  </view>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { mapState } from "vuex";

export default defineComponent({
  props: {
    navigationBarTitleText: String,
    matchLeftWindow: Boolean,
    showLeftWindow: Boolean,
  },
  data: () => ({
    menuItems: [
      {
        dir: "/pages/admin/project",
        path: "/index",
        title: "项目"
      },
      {
        dir: "/pages/admin/robot",
        path: "/index",
        title: "流动性管理"
      },
      {
        dir: "/pages/admin/trade",
        path: "/index",
        title: "交易"
      },

    ] as any[],
    config: getApp().globalData!.$config as any,
  }),
  computed: {
    ...mapState(["itemIndex", "items"])
  },
  methods: {
    changeItem({ detail }: any) {
      if (this.itemIndex === detail.value) return;
      this.$store.commit("setState", { key: "itemIndex", value: detail.value });
      // #ifdef H5
      location.reload();
      // #endif

      // #ifndef H5
      uni.reLaunch({ url: this.config.PAGE_ADMIN_HOME });
      // #endif
    },
    toggleLeftWindow() {
      uni.showLeftWindow({});
    },
    showActionItems() {
      uni.showActionSheet({
        itemList: ["退出登录"],
        itemColor: "#666",

        success: ({ tapIndex }) => {
          switch (tapIndex) {
            case 0:
              uni.clearStorage();
              uni.reLaunch({ url: this.config.PAGE_LOGIN_ACCOUNT });
              break;
            default:
              break;
          }
        },
      });
    },
    onClickItems({ menuIndex, itemIndex }: { menuIndex: number; itemIndex?: number; }) {
      const menu = this.menuItems[menuIndex];
      if (itemIndex !== undefined) {
        const item = menu.children[itemIndex];
        let url = item.dir + item.path;
        url === this.$route!.path || uni.redirectTo({ url: item.dir + item.path, success: () => uni.hideLeftWindow({}) });
        return;
      }

      if (!menu.children) {
        let url = menu.dir + menu.path;
        url === this.$route!.path || uni.redirectTo({ url, success: () => uni.hideLeftWindow({}) });
        return;
      }
    },
    toHome() {
      uni.reLaunch({ url: this.config.PAGE_ADMIN_HOME });
    },
  },
});
</script>

<style lang="scss" scoped>
// scss
</style>